<template>
    <div class="businessTable-style">
        <timeChange
            @clickTime="clickType"
            :duringTIme="2000"
            :openCycle="false"
            :btnTitle="['商铺商机情况', '成员商机情况']"
        ></timeChange>
        <div class="table-wrap">
            <div class="table-head-wrap">
                <el-row>
                    <el-col :span="4" class="el-style">
                        <div class="head-content"></div>
                    </el-col>
                    <el-col :span="4" class="el-style">
                        <div class="head-content">一星商机</div>
                    </el-col>
                    <el-col :span="4" class="el-style">
                        <div class="head-content">二星商机</div>
                    </el-col>
                    <el-col :span="4" class="el-style">
                        <div class="head-content" style="border-right: 1px solid #ddd;">三星商机</div>
                    </el-col>
                    <el-col :span="5" class="el-style">
                        <div class="head-content">总计</div>
                    </el-col>
                </el-row>
            </div>
            <div class="table-body-wrap">
                <el-row v-for="(item, i) in datalist" :key="i" :style="{width: datalist.length > 5 ? 'calc(100% + 6px)': ''}">
                    <el-col :span="4" class="el-style">
                        <div class="body-content">{{item.name}}</div>
                    </el-col>
                    <el-col :span="4" class="el-style">
                        <div class="body-content">11</div>
                    </el-col>
                    <el-col :span="4" class="el-style">
                        <div class="body-content">2</div>
                    </el-col>
                    <el-col :span="4" class="el-style">
                        <div class="body-content" style="border-right: 1px solid #ddd;">15</div>
                    </el-col>
                    <el-col :span="5" class="el-style">
                        <div class="body-content">80</div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
    import timeChange from '@/components/timeChange';
    export default {
        name: "businessTable",
        components: {
            timeChange
        },
        data() {
            return {
                changeType: 1,
                datalist: [
                    {
                        name: '网线'
                    },
                    {
                        name: '视联网'
                    },
                    {
                        name: '电视'
                    },
                    {
                        name: '固话'
                    },
                    {
                        name: 'SAS'
                    }
                ]
            }
        },
        methods: {
            clickType(type) {
                this.changeType =  type
                console.log(this.changeType)
            }
        }
    }
</script>

<style scoped lang="less">
.businessTable-style {
    position: absolute;
    width: 50%;
    height: 250px;
    left: 50%;
    overflow: hidden;
    //background: rgba(255, 255, 0, 0.27);
    .table-wrap {
        position: absolute;
        width: calc( 100% - 10px );
        height: 200px;
        top: 42px;
        border: 1px solid #ddd;
        box-sizing: border-box;
        font-size: 14px;
        border-bottom: 0;
        .table-head-wrap {
            position: relative;
            box-sizing: border-box;
            width: 100%;
            height: 33.3px;
            border-bottom: 1px solid #ddd;
            background: rgb(231,243,255);
            .el-style {
                width: 20%;
                .head-content {
                    position: relative;
                    overflow: hidden;
                    width: 100%;
                    height: 33.3px;
                    line-height: 33.3px;
                    text-align: center;
                    font-weight: bolder;
                    color: #333;
                }
            }
        }
        .table-body-wrap {
            position: relative;
            box-sizing: border-box;
            width: 100%;
            height: calc(100% - 33.3px);
            background: white;
            overflow: auto;
            overflow-x: hidden;
            &::-webkit-scrollbar {
                /*滚动条整体样式*/
                width : 6px;  /*高宽分别对应横竖滚动条的尺寸*/
                height: 6px;
            }
            &::-webkit-scrollbar-thumb {
                /*滚动条里面小方块*/
                border-radius: 10px;
                box-shadow   : inset 0 0 5px #777777;
                background   : #ececec;
            }
            &::-webkit-scrollbar-track {
                /*滚动条里面轨道*/
                border-radius: 10px;
                background: transparent;
            }
            .el-style {
                width: 20%;
                border-bottom: 1px solid #ddd;
                .body-content {
                    position: relative;
                    overflow: hidden;
                    width: 100%;
                    height: 32px;
                    line-height: 32px;
                    text-align: center;
                }
            }
        }
    }
}
</style>
